<template>
  <div class="index-page" :style="{height: winHeight+'px'}">
    <div class="bg"></div>
    <div class="menu-box">
      <el-menu
          mode="horizontal"
          :ellipsis="false"
      >
        <div class="menu-item">
          <el-image :src="logo" alt="Tedu-AI"/>
          <!-- <div class="title">{{ title }}</div> -->
        </div>
        <div class="menu-item">
          <el-button-group class="ml-4">
            <el-button class="login-button" type="primary" @click="router.push('/login')" round>
              <el-icon :size="20" class="login-icon"><UserFilled /></el-icon>登录/</el-button>
            <el-button class="register-button" type="primary" @click="router.push('/register')" round>注册</el-button>
          </el-button-group>
        </div>
      </el-menu>
    </div>
    <div class="content">
      <h1>{{ title }}</h1>
      <p>{{ slogan }}</p>

      <div class="box">
        <div class="inner" @click="router.push('/chat')">
          <el-image :src="duihua" :fit="scale-down" class="img"/>
          <div class="name">AI对话</div>
          <div class="desc">你的全能AI助手</div>
        </div>
        

        <div class="inner" @click="router.push('/dalle')">
          <el-image :src="dall" :fit="scale-down" class="img"/>
          <div class="name">DALL-E</div>
          <div class="desc">Dalle3生成创意图像</div>
        </div>

        <div class="inner" @click="router.push('/images-wall')">
          <el-image :src="hualang" :fit="scale-down" class="img"/>
          <div class="name">画廊</div>
          <div class="desc">艺术之廊 展示画作精华</div>
        </div>

        <div class="inner" @click="router.push('/member')">
          <el-image :src="huiyuan" :fit="scale-down" class="img"/>
          <div class="name">会员计划</div>
          <div class="desc">尊享特权与服务</div>
        </div>

        <div class="inner" @click="router.push('/xmind')">
          <el-image :src="siwei" :fit="scale-down" class="img"/>
          <div class="name">思维导图</div>
          <div class="desc">结构化思维工具</div>
        </div>
      </div>
    </div>

    <div class="footer">
      <footer-bar />
    </div>
  </div>
</template>

<script setup>

// import * as THREE from 'three';
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import {httpGet} from "@/utils/http";
import {ElMessage} from "element-plus";
import {isMobile} from "@/utils/libs";
import {UserFilled} from "@element-plus/icons-vue";

const router = useRouter()

if (isMobile()) {
  router.push("/mobile")
}

const title = ref("Tedu-AI 创作系统")
const logo = ref("/images/logo2.png")
const slogan = ref("我辈之人，先干为敬，陪您先把 AI 用起来")
// const size = Math.max(window.innerWidth * 0.5, window.innerHeight * 0.8)
const winHeight = window.innerHeight - 150

// index img
const dall = ref("/images/dall.jpg")
const duihua = ref("/images/duihua.jpg")
const hualang = ref("/images/hualang.jpg")
const huiyuan = ref("/images/huiyuan.jpg")
const siwei = ref("/images/siwei.jpg")

onMounted(() => {
  httpGet("/api/config/get?key=system").then(res => {
    title.value = res.data.title
    // logo.value = res.data.logo
  }).catch(e => {
    ElMessage.error("获取系统配置失败：" + e.message)
  })
  init()
})

const init = () => {
  // // 创建场景
  // // 创建场景
  // const scene = new THREE.Scene();
  //
  // // 创建相机
  // const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 1000);
  // camera.position.z = 3.88;
  //
  // // 创建渲染器
  // const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  // renderer.setSize(size, size);
  // renderer.setClearColor(0x000000, 0);
  // const container = document.getElementById('animation-container');
  // container.appendChild(renderer.domElement);
  //
  // // 加载地球纹理
  // const loader = new THREE.TextureLoader();
  // loader.load(
  //     '/images/land_ocean_ice_cloud_2048.jpg',
  //     function (texture) {
  //       // 创建地球球体
  //       const geometry = new THREE.SphereGeometry(1, 32, 32);
  //       const material = new THREE.MeshPhongMaterial({
  //         map: texture,
  //         bumpMap: texture, // 使用同一张纹理作为凹凸贴图
  //         bumpScale: 0.05, // 调整凹凸贴图的影响程度
  //         specularMap: texture, // 高光贴图
  //         specular: new THREE.Color('#01193B'), // 高光颜色
  //       });
  //       const earth = new THREE.Mesh(geometry, material);
  //       scene.add(earth);
  //
  //       // 添加环境光和点光源
  //       const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
  //       scene.add(ambientLight);
  //       const pointLight = new THREE.PointLight(0xffffff, 0.8);
  //       pointLight.position.set(5, 5, 5);
  //       scene.add(pointLight);
  //
  //       // 创建动画
  //       const animate = function () {
  //         requestAnimationFrame(animate);
  //
  //         // 使地球自转和公转
  //         earth.rotation.y += 0.0006;
  //
  //         renderer.render(scene, camera);
  //       };
  //
  //       // 执行动画
  //       animate();
  //     }
  // );
}
</script>

<style lang="stylus" scoped>
@import '@/assets/iconfont/iconfont.css'
.index-page {
  margin: 0
  overflow hidden
  color #ffffff
  display flex
  justify-content center
  align-items baseline
  padding-top 100px

  .bg {
    position absolute
    top 0
    left 0
    width 100vw
    height 100vh
    background-image url("~@/assets/img/ai-bg2.jpg")
    //filter: blur(8px);
    background-size: cover;
    background-position: center;
  }

  .menu-box {
    position absolute
    top 0
    width 100%
    display flex

    .el-menu {
      padding 0 30px
      width 100%
      display flex
      justify-content space-between
      background none
      border none

      .menu-item {
        display flex
        padding 20px 0

        color #ffffff

        .title {
          font-size 24px
          padding 10px 10px 0 10px
        }

        .el-image {
          height 50px
        }

        .login-button {
          padding-right: 0px
          margin-right: 0px;
          border-right-width: 0px;

          .login-icon {
            padding-right: 5px;
          }
        }

        .register-button {
          padding-left: 0px
          margin-left: 0px;
          border-left-width: 0px;
        }
      }
    }
  }

  .content {
    text-align: center;
    position relative

    h1 {
      font-size: 5rem;
      margin-bottom: 1rem;
      background: linear-gradient(to right, #ffffff, #536de8, #009fcf, #7eb4d3, #01c8ff, #1ea0ef, #06c5fd, #22a3fe)
      -webkit-background-clip: text
      color: transparent
      background-clip: text
      -webkit-text-fill-color: transparent
    }

    p {
      margin-bottom: 2rem;
      color: #97989b
    }

    .box {
      margin: 100px;
      width: 1100px;
      display: flex;
      justify-content: space-between;
    }
    .inner {
      width: 200px;
      height: 300px;
      background: #fff;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-sizing: border-box;
      padding-left: 30px;
      cursor: pointer;
    }

    .inner:hover {
      background-color: #e0e0e0; /* 鼠标悬停时改变背景颜色 */
      transform: scale(1.05); /* 鼠标悬停时稍微放大元素 */
    }

    .img {
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
    .name {
      font-size: 18px;
      font-weight: bold;
      margin-top: 8px;
      text-align: left
      color #000
      cursor: pointer;
    }
    .desc {
      font-size: 14px;
      margin-top: 8px;
      text-align: left
      color #a2a1a3
      cursor: pointer;
    }

    .el-button {
      padding: 25px 20px;
      font-size: 1.3rem;
      transition: all 0.3s ease;

      .iconfont {
        font-size 1.6rem
        margin-right 10px
      }
    }
  }

  .footer {
    .el-link__inner {
      color #ffffff
    }
  }

}
</style>
